<template>
  <div>
    <!-- 中间内容 -->
    <div class="data-main">
      <div class="main-second">
        <div
          class="main-bg"
          v-for="(item, index) in pointMain"
          :key="index"
          @click="choosePoint(index)"
          :class="{ pointBg: isPoint == index }"
        >
          <a href="#">{{ item.name }}</a>
        </div>
      </div>
    </div>

    <!-- 轮播设置 -->
    <div class="point-all">
      <!-- 积分统计左边内容 -->

      <!-- 积分统计右边内容 -->
      <div class="point-right">
        <div class="point-top">
          <div>
            <el-button type="primary">新增</el-button>
          </div>
          <div>
            <input
              type="text"
              class="point-input"
              placeholder="请输入内容搜索"
            />
          </div>
          <div>
            <el-select v-model="valueoptions" clearable placeholder="请选择分区">
              <el-option
                v-for="item in options"
                :key="item.valueoptions"
                :label="item.label"
                :value="item.valueoptions"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-select v-model="valueChoose" clearable placeholder="请选择状态">
              <el-option
                v-for="item in optionssecond"
                :key="item.valueChoose"
                :label="item.labelsecond"
                :value="item.valueChoose"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-button type="primary">查询</el-button>
          </div>
        </div>
        <div class="form-list">
          <table>
            <tr class="form-top">
              <td>
                <el-checkbox></el-checkbox>
              </td>
              <td>轮播名称</td>
              <td>图片</td>
              <td>链接</td>
              <td>所在分区</td>
              <td>状态</td>
              <td>操作</td>
            </tr>
            <tr>
              <td>
                <el-checkbox></el-checkbox>
              </td>
              <td>轮播1</td>
              <td>
                <img src="../assets/lunbopic.svg" alt="" />
              </td>
              <td>-</td>
              <td>首页</td>
              <td>
                <el-switch
                  v-model="settingOne"
                  active-color="#13ce66"
                  inactive-color="#dcdfe6"
                >
                </el-switch>
              </td>
              <td>
                <div class="again-pwd">
                  <el-button type="primary">编辑</el-button>
                  <el-button type="primary">删除</el-button>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <el-checkbox></el-checkbox>
              </td>
              <td>轮播2</td>
              <td>
                <img src="../assets/lunbopic.svg" alt="" />
              </td>
              <td>www.baidu.com</td>
              <td>案例区</td>
              <td>
                <el-switch
                  v-model="settingTwo"
                  active-color="#13ce66"
                  inactive-color="#dcdfe6"
                >
                </el-switch>
              </td>
              <td>
                <div class="again-pwd">
                  <el-button type="primary">编辑</el-button>
                  <el-button type="primary">删除</el-button>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <el-checkbox></el-checkbox>
              </td>
              <td>轮播3</td>
              <td>
                <img src="../assets/lunbopic.svg" alt="" />
              </td>
              <td>www.baidu.com</td>
              <td>成片区</td>
              <td>
                <el-switch
                  v-model="settingThree"
                  active-color="#13ce66"
                  inactive-color="#dcdfe6"
                >
                </el-switch>
              </td>
              <td>
                <div class="again-pwd">
                  <el-button type="primary">编辑</el-button>
                  <el-button type="primary">删除</el-button>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <el-checkbox></el-checkbox>
              </td>
              <td>轮播4</td>
              <td>
                <img src="../assets/lunbopic.svg" alt="" />
              </td>
              <td>-</td>
              <td>素材区</td>
              <td>
                <el-switch
                  v-model="settingFour"
                  active-color="#13ce66"
                  inactive-color="#dcdfe6"
                >
                </el-switch>
              </td>
              <td>
                <div class="again-pwd">
                  <el-button type="primary">编辑</el-button>
                  <el-button type="primary">删除</el-button>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <el-checkbox></el-checkbox>
              </td>
              <td>轮播5</td>
              <td>
                <img src="../assets/lunbopic.svg" alt="" />
              </td>
              <td>www.baidu.com</td>
              <td>任务区</td>
              <td>
                <el-switch
                  v-model="settingFive"
                  active-color="#13ce66"
                  inactive-color="#dcdfe6"
                >
                </el-switch>
              </td>
              <td>
                <div class="again-pwd">
                  <el-button type="primary">编辑</el-button>
                  <el-button type="primary">删除</el-button>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <!-- 分页 -->
        <div class="page">
          <div class="page-num">
            <span>共15条</span>
          </div>

          <div class="page-select">
            <el-select v-model="Numones" clearable placeholder="5条/页">
              <el-option
                v-for="item in pageNums"
                :key="item.Numones"
                :label="item.numBers"
                :value="item.Numones"
              >
              </el-option>
            </el-select>
          </div>
          <div class="page-numBer">
            <div class="block">
              <el-pagination background layout="prev, pager, next" :total="50">
              </el-pagination>
            </div>
          </div>
          <!-- <div class="go-page">
            <span>跳转</span>
            <input type="text" />
            <span>页</span>
          </div> -->
        </div>
      </div>

      <!-- 按人员统计 -->
      <div class="point-right" v-show="rightContent === 1">
        <!-- <h2>按人员统计内容</h2> -->

        <div class="point-top">
          <input
            type="text"
            class="point-input"
            placeholder="请输入内容用户名、姓名搜索"
          />
          <el-time-select
            v-model="valueone"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30',
            }"
            placeholder="选择时间"
          >
          </el-time-select>
          <el-button type="primary">查询</el-button>
          <el-button type="primary">导出</el-button>
        </div>
        <div class="form-list">
          <table>
            <tr class="form-top">
              <td>姓名</td>
              <td>用户名</td>
              <td>所属分组</td>
              <td>总积分</td>
            </tr>
            <tr>
              <td>张三</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>李四</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>张三</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>张三</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>李四</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>
        </div>
        <!-- 分页 -->
        <div class="page">
          <div class="page-num">
            <span>共15条</span>
          </div>

          <div class="page-select">
            <el-select v-model="value" clearable placeholder="5条/页">
              <el-option
                v-for="item in pageNums"
                :key="item.Numones"
                :label="item.numBers"
                :value="item.Numones"
              >
              </el-option>
            </el-select>
          </div>
          <div class="page-numBer">
            <div class="block">
              <el-pagination background layout="prev, pager, next" :total="50">
              </el-pagination>
            </div>
          </div>
          <!-- <div class="go-page">
            <span>跳转</span>
            <input type="text" />
            <span>页</span>
          </div> -->
        </div>
      </div>
    </div>

    <!-- 角色管理-->

    <div class="point-all">
      <div class="user-content">
        <!-- 用户列表左边内容 -->
        <div class="user-Left">
          <div class="user-zu">
            <span>角色</span>
          </div>
          <div class="user-jia">
            <img src="../assets/jia.svg" alt="" />
          </div>

          <!-- 左边分组 -->
          <div class="left-content">
            <ul>
              <li @click="grouping(num)" :class="{ isgroup: groupbg }">
                默认分组
              </li>
              <li>admin</li>
              <li
                class="other"
                @click="grouping(num)"
                :class="{ isgroup: groupbg }"
              >
                其他角色
                <div>
                  <img src="../assets/jiahao.svg" alt="" />
                </div>
                <div>
                  <img src="../assets/bi.png" alt="" />
                </div>
                <div>
                  <img src="../assets/del.png" alt="" />
                </div>
              </li>
              <li @click="grouping(num)" :class="{ isgroup: groupbg }">运营</li>
               <li
                class="other"
                @click="grouping(num)"
                :class="{ isgroup: groupbg }"
              >
                剪辑
               
                <div>
                  <img src="../assets/bi.png" alt="" />
                </div>
                <div>
                  <img src="../assets/del.png" alt="" />
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 用户列表右边内容 -->
        <div class="user-Right">
          <div class="user-input">
            <el-input v-model="input" placeholder="请输入搜索内容"></el-input>
          </div>

          
          <div class="ThreeBtn">
            <el-button type="primary">查询</el-button>
            <!-- <el-button type="primary">移动到</el-button>
            <el-button type="primary">导入</el-button> -->
          </div>

          <div class="tree">
            <el-tree
              :data="data"
              show-checkbox
              node-key="id"
              :default-expanded-keys="[2, 3]"
              :default-checked-keys="[5]"
              :props="defaultProps"
            >
            </el-tree>
          </div>
          <!-- 分页 -->
          <div class="page">
            <div class="page-num">
              <span>共15条</span>
            </div>

            <div class="page-select">
              <el-select v-model="value" clearable placeholder="5条/页">
                <el-option
                  v-for="item in pageNums"
                  :key="item.Numones"
                  :label="item.numBers"
                  :value="item.Numones"
                >
                </el-option>
              </el-select>
            </div>
            <div class="page-numBer">
              <div class="block">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="50"
                >
                </el-pagination>
              </div>
            </div>
            <!-- <div class="go-page">
              <span>跳转</span>
              <input type="text" />
              <span>页</span>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navList: [
        {
          id: "1",
          name: "首页",
        },
        {
          id: "2",
          name: "视频管理",
        },
        {
          id: "3",
          name: "用户管理",
        },
        {
          id: "4",
          name: "数据统计",
        },
        {
          id: "5",
          name: "系统设置",
        },
      ],
      //   轮播设置
      pointMain: [
        {
          name: "轮播设置",
        },
        {
          name: "角色管理",
        },
      ],
  // 角色管理
  data: [
    {
          id: 1,
          label: '首页',
          children: [{
            id: 4,
            label: '案例区',
            children: [{
              id: 9,
              label: '下载'
            }, 
            {
              id: 10,
              label: '上传'
            },
            {
              id: 11,
              label: '查看'
            }
            
            ],
          }]
        }, {
          id: 2,
          label: '成片区',
          children: [{
            id: 5,
            label: '下载'
          }, 
          {
            id: 6,
            label: '上传'
          },
          {
            id: 6,
            label: '查看'
          },
          ]
        },
        
     
        
        ],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
      //   分组统计

      options: [
        {
          valueoptions: "选项1",
          label: "首页",
        },
        {
          valueoptions: "选项2",
          label: "成片区",
        },
        {
          valueoptionse: "选项3",
          label: "...",
        },
      ],


      valueoptions:"",
      optionssecond: [
        {
          valueChoose: "选项5",
          labelsecond: "请选择状态",
        },
        {
          valueChoose: "选项6",
          labelsecond: "有效",
        },
        {
          valueChoose: "选项7",
          labelsecond: "无效",
        },
      ],
      settingOne: true,
      settingTwo: true,
      settingThree: true,
      settingFour: true,
      settingFive: true,
      groupbg: false,
      num: 0,
      //   分页
      pageNums: [
        {
          Numones: "5条/页",
          numBers: "5条/页",
        },
      ],
Numones:"",
      input: "",
      value: "",
      valueChoose: "",
      // 时间选择器
      valueone: "",
      countPoint: 0,
      isPoint: 0,
      rightContent: 0,
      pointAll: 0,
    };
  },
  methods: {
    choosePage(id) {
      //   if (id === "2") {
      //     this.$router.push({
      //       path: "/videolist",
      //     });
      //   }
    },
    grouping(num) {
      this.groupbg = num;
    },
    choosePoint(index) {
      this.isPoint = index;
      this.pointAll = index;
      console.log(this.isPoint);
    },
    // chooseBg(index) {
    //   this.countPoint = index;
    //   this.rightContent = index;
    // },
  },

  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f2f2f2;");
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
};
</script>


<style lang="scss">
// 积分统计
.data-main {
  width: 100%;
  margin-top: 25px;
  min-width: 1200px;

  margin-bottom: 20px;
}

.main-second {
  width: 1378px;
  height: 52px;

  margin: 0 auto;
  display: flex;
  padding-left: 45px;
  padding-bottom: 5px;
  min-width: 1200px;
  background-color: white;
}
.main-second > div {
  width: 120px;
  // margin-right: 10px;

  height: 30px;
  margin-top: 12px;
  border-color: #aaaaaa;
  box-sizing: border-box;

  border: 1px solid #aaaaaa;
  text-align: center;
}
.main-second > div a {
  text-decoration: none;
  font-size: 13px;

  margin-top: 5px;
  color: #333333;
  display: inline-block;
}
.main-bg {
  padding-left: 10px;
}
.pointBg {
  background-color: #aaaaaa;
}
.pointBg a {
  color: white !important;
}

// 积分统计
.point-all {
  width: 1425px;
  height: 697px;

  margin: 0 auto;
  display: flex;

  min-width: 1200px;
  background-color: white;
}
.point-left {
  width: 267px;

  margin-top: 15px;

  p {
    margin-left: 20px;
    color: #333333;
    font-size: 14px;
    font-weight: bold;
  }
}
.point-list {
  width: 267px;
  margin-top: 20px;
  height: 613px;
  border-right: 1px solid #f2f2f2;
  text-align: center;
}
.point-list > div {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  cursor: pointer;
  color: #7f7f7f;
  margin-bottom: 15px;
}
.point-list .countBg {
  color: #000000;
  font-weight: bold;
  background-color: #f2f2f2;
}

.point-right {
  width: 1000px;
  margin: 0 auto;
  padding-top: 40px;
}
.point-top {
  width: 900px;
  display: flex;
  justify-content: flex-start;
  //   justify-content: space-around;
  margin: 0 auto;

  .point-input {
    width: 227px;
    outline: none;
    margin-right: 20px;
    padding-left: 14px;
    border-radius: 3px;
    height: 40px;
    border: 1px solid rgba(220, 230, 234, 1);
  }
}
.point-top div {
  margin-right: 15px;
}

.el-select {
  margin-right: 26px;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  margin-right: 26px;
}
.el-button--primary {
  margin-right: 15px;
}

.form-list {
  width: 900px;
  margin-top: 35px;
  margin: 0 auto;
  // border: 1px solid red;
  // border-right:1px solid red;
}
table {
  border: 1px solid #ebebeb;
  width: 888px;
  text-align: center;
}
.form-top {
  background-color: rgb(242, 242, 242);
}
tr {
  border: 1px solid #ebebeb;
}
td {
  font-size: 13px;
  color: #333333;
  height: 30px;
  //  padding-top: 5px;
  line-height: 30px;
  //     border-top:  1px solid red;
  border: 1px solid #ebebeb;
  img {
    padding-top: 15px;
  }
}

.again-pwd {
  width: 248px;
  margin: 0 auto;
  justify-content: center;
  text-align: center;
  display: flex;
}
button {
  padding: 11px 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
}

// 分页
.page {
  width: 853px;
  margin-bottom: 40px;
  display: flex;
  margin-left: 15px;
  justify-content: flex-start;
  margin-top: 40px;
}
.page-num {
  width: 100px;
  // margin-right: 15px;
}
span {
  font-size: 14px;
}
.page-select {
  margin-right: 15px;
  width: 156px;

  input {
    height: 21px;
  }
}

.go-page {
  width: 500px;
  margin-top: 5px;
  span {
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
  }
}

.el-input__icon {
  line-height: 21px !important;
}
.user-Left li {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  padding-left: 10px;
  color: #333333;
  margin-bottom: 20px;
}
.user-Left .other > div {
  padding-top: 10px;
  margin-left: 10px;
}.left-content {
      border-right: 1px solid #f2f2f2;
    height: 600px;
}
.other {
  display: flex;
  background-color: #f2f2f2f2;
  color: #7f7f7f;
}

.tree {
  width: 900px;
  margin-top: 50px;

}
.el-table .cell,
.el-table--border .el-table__cell:first-child .cell {
  text-align: center !important;
}
</style>